<!-- created by chengfei 2023/4/17 -->
<!-- 组件：列表设计-导航树配置 -->
<template>
    <div>
        <!-- 工具栏 -->
        <a-space style="margin-bottom: 10px">
            <a-button type="primary" @click="addRow">{{$ti18('rxList.newBtn','新建')}}</a-button>
            <a-button @click="delRow">{{$ti18('rxList.delBtn','删除')}}</a-button>
        </a-space>
        <!-- 表格 -->
        <rx-grid
            ref="table"
            :columns="columns"
            :data-source="tabList"
            :allow-row-select="true"
            bordered
            :multi-select="true"
            :show-page="false"
            id-field="idx_"
            style="min-height: 300px"
        >
            <!-- 插槽：导航Tab名称 -->
            <template #tabName="{ record }">
                <a-input v-model="record.tabName" style="width: 100%" />
            </template>

            <!-- 插槽：树ID -->
            <template #treeId="{ record }">
                <a-input v-model="record.treeId" style="width: 100%" />
            </template>

            <!-- 插槽：参数名称 -->
            <template #paramName="{ record }">
                <a-select v-model="record.paramName" :options="paramData" style="width: 100%" />
            </template>

            <!-- 插槽：仅选择叶子节点 -->
            <template #onlySelLeaf="{ record }">
                <a-radio-group v-model="record.onlySelLeaf">
                    <a-radio value="YES">{{i18n('YES','是')}}</a-radio>
                    <a-radio value="NO">{{i18n('NO','否')}}</a-radio>
                </a-radio-group>
            </template>

            <!-- 插槽： 数据配置-->
            <template #settingConf="{ text, record, index }">
                <a-button @click.stop="openTabTree(record)">
                    {{i18n('config','配置')}}
                </a-button>
                <span v-if="record.isSetedSetting" class="is-seted">
                        <i class="iconfont iconsuccess_fill is-seted" />
                        {{i18n('hasConfig','已配')}}
                </span>
                <a-icon
                    v-if="record.isSetedSetting"
                    type="delete"
                    style="margin-left: 10px"
                    @click.stop="clearTabSetting(record)"
                />
            </template>
        </rx-grid>
    </div>
</template>

<script>
import { RxGrid, Util, GridMixin, BaseForm } from "@lowcode/jpaas-common-lib"
import Edit2TabTreeConfSetting from './Edit2TabTreeConfSetting'

export default {
    name: 'TabTreeConf',
    mixins: [GridMixin, BaseForm],
    components: { RxGrid },
    props: {
        defaultValue: { type: Object, default: () => {} },
        fieldDataAll: { type: Array, default: () => []}
    },
    data() {
        return {
            // 表格
            columns: [
                { title: this.i18n('form.tabName','导航Tab名称'), width: 100, dataIndex: 'tabName', scopedSlots: { customRender: 'tabName' } },
                { title: this.i18n('form.treeId','树ID'), width: 100, dataIndex: 'treeId', scopedSlots: { customRender: 'treeId' } },
                { title: this.i18n('form.paramName','参数名称'), width: 100, dataIndex: 'paramName', scopedSlots: { customRender: 'paramName' } },
                {
                    title: this.i18n('form.onlySelLeaf','仅选择叶子节点'),
                    width: 100,
                    dataIndex: 'onlySelLeaf',
                    scopedSlots: { customRender: 'onlySelLeaf' },
                },
                {
                    title: this.i18n('form.settingConf','数据配置'),
                    width: 100,
                    dataIndex: 'settingConf',
                    scopedSlots: { customRender: 'settingConf' },
                }
            ],
            tabList: [],
        }
    },
    computed: {
        paramData() {
            return this.fieldDataAll.map(item=>{
                return {label:item.comment,value:item.fieldName};
            })
        },
    },
    mounted() {
        const { tabTreeList } = this.defaultValue
        this.tabList = tabTreeList ? [...tabTreeList] : []
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formCodegenBusiness.edit2.TabTreeConf",key);
        },
        // 表格工具栏
        // 新增行
        addRow() {
            const newRow = {
                tabName: '',
                treeId: '',
                paramName: '',
                onlySelLeaf: 'NO',
                isSetedSetting:false
            }
            this.$refs.table.addRow(newRow)
        },
        // 删除行
        delRow() {
            const table = this.$refs.table
            table.removeRows()
            table.selectedRowKeys = []
            table.selectedRows = []
            this.$forceUpdate()
        },
        clearTabSetting(record){
            this.$confirm({
                title: this.$ti18("rxMsa.tipsInfo","提示信息"),
                content: this.i18n('tipsInfo','确认删除配置吗?'),
                onOk() {
                    record.settingConf="";
                    record.isSetedSetting=false;
                },
                zIndex:10000,
                onCancel() {},
                okText: this.$ti18('rxForm.okBtn','确定'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
            });
        },
        // 导航tab名称（配置）
        openTabTree(record) {
            var renderConf = record.settingConf || { type: 'custom', setting: {} }
            var wh = ['800px', '600px']
            var conf = {
                component: Edit2TabTreeConfSetting,
                title: this.i18n('confSetTitle','数据范围配置'),
                curVm: this,
                data: {
                    config: renderConf,
                    fields: this.fieldDatas,
                },
                widthHeight: wh,
                shade: true,
            }
            Util.open(conf, function (action) {
                if (action != 'ok') {
                    return
                }
                const data = this.getData()
                record.isSetedSetting = true;
                record.settingConf = data
            })
        },

        collectData() {
            let result={success:true};
            const data = this.$refs.table.getData()
            //树ID集合
            var treeIdAry=[];
            // 去除空行
            var tableData = []
            for(let i=0;i<data.length;i++){
                let elem=data[i];
                if(treeIdAry.includes(elem.treeId)){
                    result.success=false;
                    result.message= this.i18n('repTreeId',"树ID不能重复！");
                    return result;
                }
                if (elem.tabName && elem.treeId && elem.paramName) {
                    treeIdAry.push(elem.treeId)
                    tableData.push(elem)
                }
            }
            let config={tabTreeList:tableData};
            result.data=config;
            return result;
        },
    },
}
</script>

<style scoped>
    .is-seted {
        color: #70b90b;
        margin-left: 5px;
    }
</style>
